<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> drag function with cookie </title>
<meta name="Generator" content="EditPlus" />
<style type="text/css" media="screen">
<!--
body,h3{font:12px/1.5em arial;}
#box{width: 250px;height:200px;border:1px solid #ccc;background: #fff;}
#box .t{height:20px;margin:0;padding:2px 4px;border-bottom:1px dashed #ddd;background: #f8f8f8;cursor: move;font:bold 13px arial;color:#f83;}
#box .t:hover{background: #eee;border-bottom:1px dashed #fc0;}
#box .ct{padding:10px;}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--

window.onload = function(){
	drag("box","t");
}

function drag(el,bar){//el为要移动的对象的id，bar为可拖拽部位的class

	var box=document.getElementById(el); //获得拖拽对象
	var t=bar;//定义className为t的部位才可拖拽
	var ie=!!(window.attachEvent && !window.opera);//判断是否IE
	var par=false; // 拖拽对象是否可以移动的开关
	var elx, ely; // 拖拽对象在页面上的坐标
	var x,y; // 拖拽对象在屏幕上的坐标

	var cleft = GetCookie("cleft");
	var ctop = GetCookie("ctop");
	if(cleft){
		box.style.position = "absolute";
		box.style.left = cleft;
		box.style.top = ctop;
	}

	box.onmousedown = FocusIt; //拖拽前预处理
	document.onmousemove = MoveIt; //拖拽
	document.onmouseup = ClearIt; //清除拖拽

	function FocusIt(e){
		var target = ie ? event.srcElement : e.target;
		if(target.className==t){
			par = true;//打开开关
			box.style.position = "absolute";//让对象绝对定位，可以在屏幕上任意位置出现
			box.style.left = box.offsetLeft+"px";//获得拖拽对象的当前页面坐标（最后加的px为了兼容ff）
			box.style.top = box.offsetTop+"px";
			x= ie ? event.clientX : e.clientX;//获得鼠标的当前页面坐标
			y= ie ? event.clientY : e.clientY;
			elx = parseInt(box.style.left);//获得拖拽对象的当前页面坐标，并转换为数字，用于后面的计算
			ely = parseInt(box.style.top);
			box.style.opacity = "0.5";
			box.style.filter  = "alpha(opacity=50)";
		}			
	}

	function MoveIt(e){
	  if (par){
		box.style.left = ie ? event.clientX + (elx - x) + "px" : e.clientX + (elx - x) + "px";
		box.style.top  = ie ? event.clientY + (ely - y) + "px" : e.clientY + (ely - y) + "px";//让拖拽对象在页面的坐标相对于鼠标的坐标移动
	  }
	}

	function ClearIt(){	
		par = false;//关闭开关
		box.style.opacity = "1";
		box.style.filter  = "alpha(opacity=100)";
		SetCookie("cleft",box.style.left);
		SetCookie("ctop",box.style.top);
	}

//Cookie
	function SetCookie(sName, sValue){
		document.cookie = sName + "=" + escape(sValue) + "; ";
	}
	function GetCookie(sName){
		var aCookie = document.cookie.split("; ");
		for (var i=0; i < aCookie.length; i++){
			var aCrumb = aCookie[i].split("=");
			if (sName == aCrumb[0]) 
			return unescape(aCrumb[1]);
		}
	}

}

//-->
</script>
</head>

<body>

<div id="box">
	<h3 class="t">Title (Press me and drag)</h3>
	<div class="ct">use Cookie to save this element's last positon, try to refresh this page;but once you close the page, i not work again </div>
</div>

</body>
</html>